/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      ad
 * @Description:    友情链接 推广 标签
 * @Author:         SuPeiSen
 * @CreateDate:     2021/2/13 11:49 上午
 * @UpdateDate:     2021/2/13 11:49 上午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import './style/ad_style.less';
import {
  AdTagItemType,
  BlogAdItemType,
  BlogRecommendedArticleType,
} from '@/type/blog/ad_type';
import { Tag, Tooltip, Carousel, Input } from 'antd';
import { log, openUrl, rgbaColorByString } from '@/utils/app_fun';
import React, { useContext, useEffect, useState } from 'react';
import { BlogSettingContext } from '@/provider/blog_setting_context';
import { AppImageUrl } from '@/config/app_config';
import { history } from '@@/core/history';
import { BlogGetShareUrlApi } from '@/service/blog/blog_share_url_api';
import { BlogShareUrlListType } from '@/type/blog/blog_share_url_type';
import { HeartOutlined, BulbOutlined } from '@ant-design/icons';
import { BlogGetTagListApi } from '@/service/blog/blog_tag_api';
import { useViewport } from '@/provider/viewport_context';
import {
  BlogAdOnClick,
  BlogGetAdListApi,
  BlogGetRecommendedArticle,
} from '@/service/blog/blog_ad_api';
import { pushArticleByParma } from '@/pages/blog/article/article_list';
import { ShowAdWidget } from '@/widget/show_ad_widget/show_ad_widget';
import { useAdList } from '@/app_hook/useAdList';

export const Ad = () => {
  // 是否是文章详情页面
  const isArticleContent =
    window.location.pathname === '/blog/article/article_content';

  // 获取共享数据
  const settingContent = useContext(BlogSettingContext);

  // 窗口监听
  const { type } = useViewport();

  // 友情链接
  const [shareUrl, setShareUrl] = useState<Array<BlogShareUrlListType>>([]);
  useEffect(() => {
    BlogGetShareUrlApi().then((model) => {
      if (model.success) {
        setShareUrl(model.data!.data);
      }
    });
  }, []);

  // 保存TagList
  const [tagListStatus, setTagListStatus] = useState<Array<AdTagItemType>>([]);
  // 获取所有的Tag
  useEffect(() => {
    BlogGetTagListApi().then((lists) => {
      setTagListStatus(lists);
    });
  }, []);

  // 保存推荐阅读
  const [recommendedArticle, setRecommendedArticle] = useState<
    Array<BlogRecommendedArticleType>
  >([]);
  // 如果是文章详情页面 则加载推荐阅读
  useEffect(() => {
    if (isArticleContent) {
      BlogGetRecommendedArticle().then((model) => {
        if (model.success) {
          setRecommendedArticle(model.data!.data);
        }
      });
    }
  }, [isArticleContent]);

  if (type === 'phone') {
    return <></>;
  }

  // 点击跳转到详情
  const pushArticle = (id: number) => {
    // @ts-ignore
    history.push({
      pathname: '/blog/article/article_content',
      query: {
        id: id,
      },
    });
  };

  // 跳转到博主简介
  const toBloggerContent = () => {
    history.push({
      pathname: '/blog/user/blogger',
    });
  };

  return (
    <div className={'ad_content'}>
      {/*头像: 如果是文章详情则隐藏*/}
      <div hidden={isArticleContent}>
        <ShowLintAdText text={settingContent?.blog_name ?? 'hello'} />
        <div style={{ display: 'block', textAlign: 'center' }}>
          {settingContent?.blog_header_image === undefined ? (
            <div />
          ) : (
            <img
              className="ad_blog_self_header_img"
              src={AppImageUrl(settingContent?.blog_header_image ?? '')}
              alt="头像"
              onClick={toBloggerContent}
            />
          )}
        </div>
      </div>

      {/*标签*/}
      <ShowLintAdText text="标签" />
      <div className="ad_blog_tags">
        {tagListStatus.map((tag) => {
          return (
            <Tag
              key={tag.id}
              onClick={() => pushArticleByParma({ tag_id: tag.id })}
              color={rgbaColorByString(tag.color)}
              className="ad_blog_tag_item"
            >
              {tag.value}
            </Tag>
          );
        })}
      </div>

      {/*搜索框*/}
      <ShowLintAdText text="搜索" />
      <div className="ad_blog_search_input">
        <div style={{ width: '90%' }}>
          <Input.Search
            placeholder="搜索文章"
            enterButton
            onSearch={(value, event) => {
              pushArticleByParma({ article_title: value });
            }}
          />
        </div>
      </div>

      {/*友情链接: 如果是文章详情则隐藏*/}
      <div hidden={isArticleContent}>
        <ShowLintAdText text="友情链接" />
        {/*<ShowAdText text="友情链接" />*/}
        <div>
          {shareUrl.map((item) => {
            return (
              <div
                key={item.id}
                className="ad_blog_share_url"
                onClick={() => {
                  window.open(item.url_path);
                }}
              >
                <div className="ad_blog_share_url_icon">
                  <HeartOutlined />
                </div>
                <div key={item.id} className="ad_blog_share_url_item">
                  <Tooltip title={item.remarks}>
                    <i>{item.url_name}</i>
                  </Tooltip>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/*推荐阅读*/}
      <div hidden={!isArticleContent}>
        <ShowLintAdText text="推荐阅读" />
        {recommendedArticle.map((item) => {
          return (
            <div
              key={item.id}
              className="ad_blog_share_url"
              onClick={() => {
                pushArticle(item.id);
              }}
            >
              <div className="ad_blog_share_url_icon">
                <BulbOutlined />
              </div>
              <div key={item.id} className="ad_blog_share_url_item">
                <i>{item.article_title}</i>
              </div>
            </div>
          );
        })}
      </div>

      {/*广告区域*/}
      <div hidden={!isArticleContent}>
        <ShowLintAdText text="广告" />
        <ShowAdWidget />
      </div>
    </div>
  );
};

export const ShowLintAdText = (props: { text?: string; bgColor?: string }) => {
  return (
    <div className="ad_blog_wrapper">
      <div className="ad_blog_line" />
      <span
        className="ad_blog_text"
        style={{ backgroundColor: props.bgColor ?? 'wheat' }}
      >
        {props.text ?? ''}
      </span>
    </div>
  );
};
